<template>
	<view>
		<view class="list">
			<ImageInstance ref="ImageInstance"></ImageInstance>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					品牌名称
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right" @click="brandClick">
					<input class="input-r" type="text" v-model="brandId" name='floor' placeholder="请选择品牌"
						placeholder-class="placeholder-class" disabled>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					业态
				</view>
				<view class="acea-row row-middle row-right item-r">
					<view class="no-data-r sanjiao-bottom" @click="openPicker('business')">请选择适合行业</view>
					<input :class="business ? 'industry-ipt2' : 'industry-ipt'" type="text" v-model="business"
						placeholder="行业" placeholder-class="placeholder-class" disabled>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					地址
				</view>
				<view class="acea-row row-middle row-right item-r address">
					<input type="text" placeholder="请输入/选择地址" v-model="dataform.address">
					<image src="../static/images/location.png" mode="" @click="mapChooseLocation"></image>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					店铺名称
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="text" placeholder="请输入店铺名称" placeholder-class="placeholder-class"
						v-model="dataform.storename" />
				</view>
			</view>
			<!-- 联系人 -->
			<view class="acea-row row-middle row-between item ">
				<view class="label label-m">
					联系人
				</view>
				<view class="add-icon" @click="toPage('/pages/releases/addShopContact/addShopContact')">
					<image src="../static/images/add_icon.png" mode=""></image>
				</view>
			</view>
			<view class="item border-b">
				<view class="contact-list">
					<view class="acea-row row-middle row-between contact-p" v-for="(item,index) in contactList"
						:key="item.id">
						<view class="acea-row row-middle row-between contact-r">
							<view class="add-icon" @click="delContact(item.id)">
								<image src="../static/images/sub_icon.png" mode=""></image>
							</view>
							<view class="name">{{ item.username }}</view>
							<view class="gray-text">
								{{ item.type == 1 ? '老板' : ( item.type == 2 ? '房东' : '雇员') }}
							</view>
							<view class="gray-text">{{ item.phone }}</view>
						</view>
						<view class="acea-row row-middle check-box">
							<image src="../static/images/checkbox_on.png" mode="" v-if="item.status == 1" @click="changeStatus(item)"></image>
							<image src="../static/images/checkbox_no.png" mode="" v-if="item.status == 0" @click="changeStatus(item)"></image>
							<text>公开</text>
						</view>
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					面积
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="text" placeholder="请输入面积" placeholder-class="placeholder-class"
						v-model="dataform.area" />
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					租金
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="text" placeholder="请输入租金" placeholder-class="placeholder-class"
						v-model="dataform.rent" />
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					人均消费
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="text" placeholder="请输入人均消费" placeholder-class="placeholder-class"
						v-model="dataform.consumption" />
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">用户评价</view>
				<view class="acea-row row-middle row-right item-r">
					<view class="acea-row row-middle row-right small-ipt">
						<!-- <input type="number" placeholder="实例:4.9" placeholder-class="placeholder-class"
							v-model="dataform.userEvaluation"> -->
						<u-number-box v-model="dataform.avgScore" :min="0" :max="5" step="0.1"></u-number-box>
					</view>
				</view>
			</view>
			<!-- 上传店铺照片/视频 -->
			<view class="module">
				<view class="acea-row row-middle row-between">
					<view class="module-title label-m">
						上传店铺照片/视频
					</view>
					<view class="example-text" @click="getImage">
						图片示例
					</view>
				</view>
				<view class="example-text-l">
					请至少添加一张照片，图片越多审核越快
				</view>
				<view class="acea-row pictrue-list">
					<view class="acea-row row-column row-center-wrapper pictrue" v-for="item in PhotoList"
						:key="item.url">
						<image :src="item.url" mode="" v-if="item.type=='image'"></image>
						<video :src="item.url" mode="" v-else></video>
					</view>
					<view class="acea-row row-column row-center-wrapper pictrue" @click="uploadImg"
						v-if="PhotoList.length<3">
						<view class="upload-icon">
							<image src="../static/images/upload_icon.png" mode=""></image>
						</view>
						<view>添加照片/视频</view>
					</view>
				</view>
				<!-- <view class="acea-row row-center row-center add-more-picture">
					<view>添加更多照片</view>
					<view class="jiantou-b"></view>
				</view> -->
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					营业时间
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right">
					<view class="no-data-r" @click="businessshow = true">{{ dataform.businessHours || '请选择营业时间' }}
					</view>
				</view>
			</view>

			<u-datetime-picker :show="businessshow" v-model="dataform.businessHours" mode="time"
				@confirm="businessshow=false"></u-datetime-picker>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					撤店时间
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right">
					<view class="no-data-r" @click="overshow = true">{{ dataform.overtime || '请选择撤店时间' }}</view>
				</view>
			</view>
			<u-datetime-picker :show="overshow" v-model="overtime" mode="date"
				@confirm="overConFirm"></u-datetime-picker>
		</view>
		<view class="acea-row row-middle row-between btns">
			<view class="white-btn" @click="handleComfrim('back')">完成并继续添加</view>
			<view class="red-btn" @click="handleComfrim">完成</view>
		</view>
		<u-picker :show="pickerShow" :columns="columns" @cancel="pickerShow=false" @confirm="confirm" :keyName="keyName"
			:defaultIndex="defaultIndex" @change="handleChange"></u-picker>
		<wordSearch ref="wordSearch" :list="brandList" keyName="realname" keyId="id" v-model="dataform.brandId" @inChange="getBrandList" @name="(name)=>{ brandId = name;$forceUpdate()}" :page="1" />
	</view>
</template>

<script>
	import {
		getPointAddApi,
		getBrandListApi,
		getclassificationListApi
	} from '@/api/brand/index.js'
	import Uselect from '../components/select.vue';
	import wordSearch from '../components/wordSearch/wordSearch.vue'
	import {
		toPage,
		getLocation
	} from '@/filters/commFilter.js';
	import ImageInstance from '../components/ImageInstance.vue'
	import {editPoint,getPointDetail,delConcats} from '@/api/centerModule/index.js'

	export default {
		components: {
			Uselect,
			ImageInstance,
			wordSearch
		},
		data() {
			return {
				brandName: '', //品牌名称
				brandId: '',
				industry: '', //适合行业
				address: '',
				shopName: '', //店铺名称
				contactList: [],
				acreage: '', //面积
				rentPrice: '', //租金
				personPrice: '', //人均消费
				evaluation: '', //用户评价
				dataform: {},
				brandList: [], //品牌列表
				classificationList: [], //业态列表
				pickerShow: false, //选择器开关
				columns: [],
				keyName: '',
				defaultIndex: [0],
				pickerType: '',
				business: '', //行业名称
				PhotoList: [], //照片列表
				businessshow: false,
				overshow: false,
				overtime: '',
				isDetail: false
			};
		},
		mounted() {
			// this.getBrandList('');
			this.getclassificationList();
			let that = this;
			uni.$on('contact', function(data) {
				if(that.contactList.findIndex(item=>item.phone == data.phone)==-1){
					that.contactList.push({
						...data,
						status: 0
					});
				}
			})
			
			uni.$on('initContact', function(data) {
				if (that.contactList.length < 1) {
					that.contactList.push(data)
				}
			})
			getApp().globalData.initContact()
		},
		methods: {
			toPage,
			brandClick(){
				this.$refs.wordSearch.open = true;
			},
			//获取品牌列表
			async getBrandList(realname) {
				uni.showLoading({
					title: '加载中'
				});
				try {
					let res = await getBrandListApi({
						limit: 10,
						realname
					});
					this.brandList = res.data.list
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
				uni.hideLoading()
			},
			//获取业态列表
			async getclassificationList() {
				try {
					let res = await getclassificationListApi({
						limit: 99999
					});
					this.classificationList = res.data
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			//打开选择器
			openPicker(params) {
				this.pickerType = params
				switch (params) {
					case 'business':
						this.columns = [
							this.classificationList, this.classificationList[0].children
						];
						this.keyName = 'name';
						this.defaultIndex = [0, 0]
						break;
					default:
						this.columns = []
				}
				this.pickerShow = true;
			},
			//选择列表滚动时
			handleChange(e) {
				const {
					columnIndex,
					value
				} = e
				columnIndex == 0 ?
					this.columns = [this.classificationList, value[0].children || []] : ''
			},
			//点击完成
			confirm(e) {
				this.dataform[this.pickerType] = e.value[1].id
				this[this.pickerType] = e.value[1].name;
				this.pickerShow = false;
			},
			//选择地址
			async mapChooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						this.$set(this.dataform, 'address', res.address)
						this.$set(this.dataform, 'latitude', res.latitude)
						this.$set(this.dataform, 'longitude', res.longitude)
					},
				})
			},
			changeStatus(item){
				console.log(item)
				this.$set(item,'status',item.status == 0? 1 : 0)
			},
			//删除联系人
			delContact(id) {
				let that = this;
				console.log(id)
				uni.showModal({
				    title: '提示',
				    content: '你确定要删除吗',
				    success: function (res) {
				        if (res.confirm) {
				        	delConcats(id).then(res=>{
								that.contactList = that.contactList.filter(item=>item.id!=id)
				        	})
				        } else if (res.cancel) {
				
				        }
				    },
					error:function(e){
						this.$util.Tips({
							title: e
						})
					}
				});
			}, //上传照片
			uploadImg() {
				uni.showActionSheet({
					title: '选择上传类型',
					itemList: ['图片', '视频'],
					success: res => {
						if (res.tapIndex == 0) {
							this.chooseImages();
						} else {
							this.chooseVideo();
						}
					}
				});
			},
			//选择照片
			chooseImages() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					count: 5,
					name: 'multipart',
					model: "user",
					pid: 0
				}, function(res) {
					that.PhotoList.push({
						url: res.data.url,
						type: 'image'
					})
				});
			},
			//选择视频
			chooseVideo() {
				let that = this;
				that.$util.uploadVideo({
					url: 'upload/image',
					name: 'multipart',
					model: "user",
					pid: 0
				}, function(res) {
					console.log(res)
					that.PhotoList.push({
						url: res.data.url,
						type: 'video'
					})
				});
			},
			//选择撤店实践
			overConFirm(e) {
				this.dataform.overtime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				console.log(uni.$u.timeFormat(e.value, 'yyyy-mm-dd'))
				this.overshow = false;
			},
			//查看图片示例
			getImage() {
				this.$refs.ImageInstance.show = true
			},
			//提交表单
			handleComfrim(back) {
				let that = this
				this.dataform.contacts = this.contactList.map(item => {
					return {
						contactId: item.id,
						open: item.status,
						identity: item.type
					}
				});
				//处理图片数据
				let images = this.PhotoList.map(item => {
					return item.url.split('9000/')[1]
				})
				this.dataform.image = images.join(',');
				if (!this.dataform.brandId) return that.$util.Tips({
					title: '请选择品牌'
				});
				if (!this.dataform.business) return that.$util.Tips({
					title: '请选择适合行业'
				});
				if (!this.dataform.address) return that.$util.Tips({
					title: '请输入/选择地址'
				});
				if (!this.dataform.storename) return that.$util.Tips({
					title: '请输入店铺名称'
				});
				if (!this.dataform.contacts) return that.$util.Tips({
					title: '请添加联系人'
				});
				// if (!this.dataform.image) return that.$util.Tips({
				// 	title: '请上传店铺图片'
				// });

				this.goPointAdd(back)
			},
			async goPointAdd(back) {
				try {
					let res;
					if(this.isDetail){
						res = await editPoint(this.dataform)
					}else{
						res = await getPointAddApi(this.dataform);
					}
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('upList');
					back ? uni.navigateBack() : this.toPage('/pages/releases/job/job');
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			//获取布点详情
			getPropertyDetail(id){
				console.log(id)
				getPointDetail(id).then(res=>{
					console.log(res.data)
					let {data} = res;
					this.dataform =  data;
					this.business=data.businessName
					this.brandId = data.brandIdName
					if(data.contacts&&data.contacts.length>0){
						data.contacts.forEach(item=>{
							item.username = item.contactName
							item.phone = item.contactPhone
							item.status = item.open?1:0
						})
						
					}
					
					this.contactList = JSON.parse(JSON.stringify(data.contacts)) 
				})
			}
		},
		onLoad(props) {
			if(props.id){
				// this.dataform.brandId = option.brandId || null;
				// this.brandId = option.brandName || null;
				this.isDetail = true;
				this.getPropertyDetail(props.id);
			}
		}
	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';

	.industry-ipt {
		width: 186rpx;
		height: 54rpx;
		border: 1px solid rgba(238, 238, 238, 1);
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(212, 212, 212, 1);
		text-align: center;
	}

	.industry-ipt2 {
		width: 186rpx;
		height: 54rpx;
		border: 1px solid rgba(238, 238, 238, 1);
		font-size: 28rpx;
		font-weight: 400;
		color: #000;
		text-align: center;
	}

	.btns {
		background: #ffffff;
		margin-top: 74rpx;

		.white-btn {
			width: 332rpx;
			height: 96rpx;
			text-align: center;
			line-height: 96rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(238, 33, 45, 1);
			border-radius: 50rpx;
			border: 1px solid rgba(238, 33, 45, 1);
			background: rgba(247, 248, 250, 1);
		}

		.red-btn {
			width: 332rpx;
			height: 96rpx;
			text-align: center;
			line-height: 96rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1.0);
			border-radius: 50rpx;
			background: rgba(238, 33, 45, 1);
			border: 1px solid rgba(238, 33, 45, 1);
		}
	}
</style>